<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/sf_style.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/ui-darkness/jquery-ui-1.9.2.custom.min.css" />
<style type="text/css">
<!--
	#product_scoll{ position:relative;overflow:hidden;}
	#product_scoll>ul>li{ overflow:hidden; }
 -->
 </style>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

<script language="javascript">
$(function(){
		var scrtime;
		var $ul = $("#product_scoll ul.scoll_ul");
		var liHeight = $ul.find("li.scoll_list:last").height()+40;
		$("#product_scoll").css("height",liHeight);
		$("#product_scoll").hover(function(){
			clearInterval(scrtime);
		},function(){
			scrtime = setInterval(function(){
				$("#product_scoll").css("height",liHeight);
				$ul.animate({marginTop : (liHeight+40) +"px"},1000,function(){
				$ul.find("li.scoll_list:last").prependTo($ul)
				$ul.find("li.scoll_list:first").hide();
				$ul.css({marginTop:0});
				$ul.find("li.scoll_list:first").fadeIn(1000);
			});
		},5000);
		}).trigger("mouseleave"); 
	
	});
	

</script>
<title>Welcome To SF Hygiene::Home</title> 
</head>
<body>
<div class="regular_content">
	<div class="header_area">
		<div class="logo_pic"><img src="${pageContext.request.contextPath}/images/logo.png"/></div>
		<div class="header_menu right">
			<ul>
			    <li class="active"><a href="${pageContext.request.contextPath}">Home</a></li>
				<li><a href="${pageContext.request.contextPath}/product/loadAllProducts.action">Goods</a></li>
				<li><a href="${pageContext.request.contextPath}/contact/loadcontact.action">Contact Us</a></li>
				<li><a href="${pageContext.request.contextPath}/enterprise/loadIntroduction.action">About Us</a></li>
				
			</ul>
		</div>
	</div>
	<div class="header_nav_title_bar">
		<div class="nav_title_bar_l left"></div>
		<div class="nav_title_bar_m left">
			<div class="left header_nav_title">Goods</div>
			<div class="right all_goods_link"><a href="${pageContext.request.contextPath}/product/loadAllProducts.action">All Goods &gt;&gt;</a></div>
			<div class="clear"></div>
		</div>
		<div class="nav_title_bar_r left"></div>
	</div>
	<div class="product_list">
		<div class="product_scoll" id="product_scoll">
			<ul class="scoll_ul">
				<!-- 每五个写在一个此位置的li里面 -->
			    <s:set name="num" value="0"></s:set>
				<s:iterator value="products">
				<s:set name="it" value="%{#num%5}"></s:set>
				<s:if test="%{#it==0}">
			
				<li class="scoll_list">
					<ul>
				</s:if>
					  <li class="click_floatbox" id="<s:property value='id'/>">
							<div class="prod_logo">
								<a href="#"><img src="${pageContext.request.contextPath}/<s:property value='logo.path'/>"/></a>
							</div>
							<div class="prod_desc">
								<h4><s:property value="name"/></h4>
								<s:if test="%{material!=''}">
									<div class="parameter">
										<h6>Material</h6>
										<p><s:property value="material"/></p>
									</div>
								</s:if>
								<s:if test="%{model!=''}">
									<div class="parameter">
										<h6>Model</h6>
										<p><s:property value="model"/></p>
									</div>
								</s:if>
								<s:if test="%{windSpeed!=''}">
									<div class="parameter">
										<h6>WindSpeed</h6>
										<p><s:property value="windSpeed"/></p>
									</div>
								</s:if>
								<s:if test="%{rpm!=''}">
									<div class="parameter">
										<h6>RPM</h6>
										<p><s:property value="rpm"/></p>
									</div>
								</s:if>
								<s:if test="%{power!=''}">
									<div class="parameter">
										<h6>Power</h6>
										<p><s:property value="power"/></p>
									</div>
								</s:if>
								<s:if test="%{unitSize!=''}">
									<div class="parameter">
										<h6>Unit_Size</h6>
										<p><s:property value="unitSize"/></p>
									</div>
								</s:if>
								<s:if test="%{airTem!=''}">
									<div class="parameter">
										<h6>Air_Temperature</h6>
										<p><s:property value="airTem"/></p>
									</div>
								</s:if>
							</div>
						</li>
						<div class="dialog-box" id="dialog-box<s:property value='id'/>" title="Details"></div>
						<script type="text/javascript">
							$(function(){
								$("#<s:property value='id'/>").click(function () {
							    	$( "#dialog-box<s:property value='id'/>" ).dialog( "open" );
							    	$( "#dialog-box<s:property value='id'/>" ).load("${pageContext.request.contextPath}/product/showProduct.action?productId="+$(this).attr('id'));
								});
								$( "#dialog-box<s:property value='id'/>" ).dialog({
									autoOpen: false,
									height: 400,
									width: 800,
									modal: true
								});
							});
						</script>
				<s:if test="%{(#num+1)%5==0}">
				     <div class="clear"></div>
					</ul>
				</li>	
			    </s:if>		
				<s:set name="num" value="%{#num+1}"/>
				</s:iterator>
			</ul>
		</div>
	</div>
	<div class="footer">
		<div class="right copyright">
			&copy;&nbsp;CreateIdea. All Reserved.
		</div>
		<div class="clear"></div>
	</div>
</div>
</body>
</html>


